<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">

<body>
<style>
    .timo-detail-title{
        text-align: center;
        font-size: 18px;
        font-weight: 600 !important;
        color: #333 !important;
    }
</style>
    <div class="timo-detail-page" style="padding: 20px">
        <table class="layui-table timo-detail-table">
            <tbody>
            <tr>
                <th >陪护员姓名</th>
                <td th:text="${complain.name}"></td>
                <th >性别</th>
                <td th:text="${#dicts.keyValue('USER_SEX', complain.sex)}"></td>
                <th >年龄</th>
                <td th:text="${complain.age}"></td>
            </tr>
            <tr>
                <th>身份证号</th>
                <td th:text="${complain.cardNo}"></td>
                <th>订单号</th>
                <td  th:text="${complain.sn}"></td>
                <th>投诉日期</th>
                <td  th:text="${complain.createTimeStr}"></td>
            </tr>
            <tr>
                <th>投诉内容</th>
                <td colspan="5" th:text="${complain.remark}"></td>
            </tr>
            <tr>
                <th>投诉图片</th>
                <td colspan="5" >
                    <div id="ID-photos-demo" style="display:flex;">
                        <th:block th:each="v : ${pics}">
                            <div style="margin-right: 20px">
                                <img  th:src="${v}" style="width: 150px;height: 100px;margin-right: 20px">
                            </div>

                        </th:block>
                    </div>
                </td>
            </tr>




            </tbody>
        </table>
        <script>
            layui.use(function(){
                var layer = layui.layer;
                // 图片层
                layer.photos({
                    photos: '#ID-photos-demo'
                });
            });
        </script>
    </div>
</body>
</html>